<template>
  <div id="home">
    <navtab></navtab>
    <div class="box" @click="sousuo">
      <van-icon name="search" class="q1" />

      搜索商品
    </div>

    <div class="box2">
      <van-tabs v-model="active" @click="qiehuan">
        <van-tab title="推荐"></van-tab>
        <van-tab
          :title="item.title"
          v-for="item in fenlei"
          :key="item._id"
          :name="item._id"
        ></van-tab>
      </van-tabs>
    </div>
    <div class="box1">
      <span>综合</span>
      <span>新品</span>
      <span>销量</span>
      <span @click="jiage">价格</span>
    </div>
    <div class="box3">
      <ul>
        <li v-for="item in list2" :key="item._id">
          <img :src="item.pic" alt="" />
          <span>{{ item.title }}</span>
          <span class="aa"
            >现价：{{ item.price }} <s>原价{{ item.old_price }}</s>
            <van-icon name="shopping-cart-o" class="bb" @click="cao(item._id)"
          /></span>
        </li>
      </ul>
    </div>
     <van-action-sheet v-model="show" title="标题">
        <div class="content">
         <div class="box4">
            <ul>
              <li>
                <img :src="one.pic" alt="">
              </li>
              <li>
                <p>{{one.title}}</p>
                <p>现价：{{one.price}}元</p>
                <p>原价：<s>{{one.old_price}}</s></p>
              </li>
            </ul>
         </div>
         <div class="box5">
           <ul>
             <li>购买数量</li>
             <li>
               <van-stepper v-model="value" />
             </li>
           </ul>
         </div>
         <div class="box6" @click="add">
           确认
         </div >
        </div>
      </van-action-sheet>;
  </div>
</template>

<script>
import navtab from "@/router/navtab";
export default {
  components: {
    navtab,
  },
  name: "",
  data() {
    return {
      value:1,
      active: 0,
      fenlei: [],
      list: [],
      list2: [],
      state: 0,
      show:false,
      one:''
    };
  },
  created() {
    this.$axios.get("/json/fenlei.json").then((res) => {
      this.fenlei = res.data.result;
    });
    this.$axios.get("/json/list.json").then((res) => {
      this.list = res.data.result;
      this.list2 = res.data.result;
    });
  },
  methods: {

    // 添加购物车
  add(){
    this.$store.commit('chang',this.value)
  },

    // 搜索事件
    sousuo(){
     this.$router.push('/about')
    },
    // 购物车
    cao(id) {
      this.show=true
      console.log(id);
      this.list.forEach(item=>{
        if(item._id==id){
          this.one=item
          console.log(this.one);
        }
      })

    },
    // 切换数据
    qiehuan(id) {
      this.list2 = [];
      this.list.forEach((item) => {
        if (item.cid === id) {
          this.list2.push(item);
        }
      });
      if (this.active === 0) {
        this.list2 = this.list;
      }
    },
    //  升降序
    jiage() {
      if (this.state === 0) {
        this.state = 1;
      } else if (this.state === 1) {
        this.state = 2;
      } else if (this.state === 2) {
        this.state = 0;
      }
      this.sortfn(this.state);
    },

    sortfn(state) {
      this.list.sort((item1, item2) => {
        if (state === 1) {
          return item1.price * 1 - item2.price * 1;
        }
        if (state === 2) {
          return item2.price * 1 - item1.price * 1;
        }
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.box6{
  width: 100%;
  height: 60px;
  background-color: red;
  color: white;
  text-align: center;
  line-height: 60px;
  font-size: 24px;
}
.box5{
  width: 100%;
  height: 100px;
  // background-color: red;
  border-top: 1px solid #cccc;
  margin-top: 10px;
  ul{
    width: 100%;
   li:nth-child(1){
     height: 100px;
     width: 100px;
     line-height: 100px;
     float: left;
   }
   li:nth-child(2){
       height: 100px;
     width: 100px;
     line-height: 100px;
     float: right;
   }
    
  }
}
.box4{
  width: 100%;
  height: 120px;
  // background-color: red;
 
  ul{
    width: 100%;
    height: 100%;
     display: flex;
  li:nth-child(1){
    width: 30%;
    height: 100%;
    // background-color: red;
    img{
      width: 100%;
      height: 100%;
    }
  }
    li:nth-child(2){
    width: 70%;
    height: 100%;
    // background-color: blue;
    p{
      font-size: 14px;
    }
  }
  }
}
/deep/.van-popup--bottom.van-popup--round{
  border-radius: 0px;
}
  .content {
    padding: 0px 0px 0px 0px;
  }
.box3 {
  width: 100%;
  ul {
    list-style: none;
    width: 100%;
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    background-color: #ccc;
    li {
      width: 48%;
      height: 250px;
      .bb {
        font-size: 24px;
        margin-left: 5px;
      }
      .aa {
        s {
          font-size: 10px;
        }
      }
      span {
        font-size: 14px;
        display: inline-block;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        font-size: 12px;
        text-overflow: ellipsis;
      }

      img {
        width: 100%;
        height: 190px;
      }
    }
  }
}
.box {
  width: 80%;
  height: 40px;
  background-color: #cccc;
  margin: 0 auto;
  border-radius: 30px;
  display: flex;

  align-items: center;
  .q1 {
    margin-left: 10px;
    font-size: 20px;
    font-weight: 700;
  }
}
.box1 {
  width: 100%;
  height: 50px;
  // background-color: red;
  margin-top: 10px;
  display: flex;
  align-items: center;
  border-top: 1px solid #cccc;
  border-bottom: 1px solid #cccc;
  span {
    flex: 1;
    text-align: center;
  }
}
</style>
